<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1{
				position: relative;
				display: inline-block;
				border-bottom: 1px dotted black;
			}
			
			.p1 .p2{
				visibility: hidden;
				width: 120px;
				background-color: black;
				color: #FFF;
				text-align: center;
				border-radius: 6px;
				padding: 5px 0;
				position: absolute;
				z-index: 1;
				top: -5px;
				left: 105%;
			}
			
			.p1:hover .p2{
				visibility: visible;
			}
			
			.p3{
				position: relative;
				display: inline-block;
				border-bottom: 1px dotted black;
			}
			
			.p3 .p4{
				visibility: hidden;
				width: 120px;
				background-color: black;
				color: #FFF;
				text-align: center;
				border-radius: 6px;
				padding: 5px 0;
				position: absolute;
				z-index: 1;
				top: -5px;
				right: 105%;
			}
			
			.p3:hover .p4{
				visibility: visible;
			}
			
			
			
			.p5{
				position: relative;
				display: inline-block;
				border-bottom: 1px dotted black;
			}
			
			.p5 .p6{
				visibility: hidden;
				width: 120px;
				background-color: black;
				color: #FFF;
				text-align: center;
				border-radius: 6px;
				padding: 5px 0;
				position: absolute;
				z-index: 1;
				bottom: 100%;
				margin-left: -100px;
			}
			
			.p5:hover .p6{
				visibility: visible;
			}
			
			.p7{
				position: relative;
				display: inline-block;
				border-bottom: 1px dotted black;
			}
			
			.p7 .p8{
				visibility: hidden;
				width: 120px;
				background-color: black;
				color: #FFF;
				text-align: center;
				border-radius: 6px;
				padding: 5px 0;
				position: absolute;
				z-index: 1;
				top: 110%;
				margin-left: -100px;
			}
			
			.p7:hover .p8{
				visibility: visible;
			}
			
			.p9{
				position: relative;
				display: inline-block;
				border-bottom: 1px dotted black;
			}
			
			.p9 .p10{
				visibility: hidden;
				width: 120px;
				background-color: black;
				color: #FFF;
				text-align: center;
				border-radius: 6px;
				padding: 5px 0;
				position: absolute;
				z-index: 1;
				bottom: 150%;
				margin-left: -100px;
				opacity: 0;
				transition: opacity 1s;
			}
			
			.p9:hover .p10{
				visibility: visible;
				opacity:1;
			}
			
			.p9 .p10::after{
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				margin-left: -5px;
				border-width: 5px;
				border-style: solid;
				border-color: black transparent transparent transparent;
			}
			
		</style>
	</head>
	<body style="padding-top: 100px;">
		
		<div class="p1">
			鼠标移动到这
			<span class="p2">
				提示文本
			</span>
		</div>
		
		<!--显示到左侧-->
		<div class="p3">
			鼠标移动到这
			<span class="p4">
				提示文本
			</span>
		</div>
		
		<!--显示到头部-->
		<div class="p5">
			鼠标移动到这
			<span class="p6">
				提示文本
			</span>
		</div>
		
		<!--显示到底部-->
		<div class="p7">
			鼠标移动到这
			<span class="p8">
				提示文本
			</span>
		</div>
		
		<!--显示箭头-->
		<div class="p9">
			鼠标移动到这
			<span class="p10">
				提示文本
			</span>
		</div>
	</body>
</html>